<template>
	<view class="container">
		  <view class="head-nav">
				<view class="nav">
		      <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">加油</view>
					<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">券包</view>
					<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">会员</view>
					<view :class="navIndex==4?'activite':''" @click="checkIndex(4)">商城</view>
		      <view :class="navIndex==5?'activite':''" @click="checkIndex(5)">养车</view>
					</view>
		    </view>
		    <!-- 内容切换 -->
		   <view class="content" v-if="navIndex==1">
		      <view class="three flex">
						<p @click="changes(10)" :class="{high:math == 10}">全部</p>
						<p @click="changes(100)" :class="{high:math == 100}">已支付</p>
						<p @click="changes(200)" :class="{high:math == 200}">退款</p>
					
					</view>
					<view class="big">
						<p class="p1">已为您累计节省</p>
            <p class="p2">￥0.00</p>
            <p class="p3">累计消费&nbsp;￥0.00&nbsp;&nbsp;&nbsp;加油总量&nbsp;0.00</p>
						
					</view>
					<view class="image">
						<image src="../../static/orders.jpg" style="width: 30%;height: 200rpx;margin-top: 180rpx;margin-left: 240rpx;margin-bottom: 20rpx;"></image>
						<p>暂无订单</p>
						<p>赶快去加油吧</p>
					</view>
					<view class="right" @click="change()">
						<image src="../../static/fa.png" style="width: 40rpx;height: 40rpx;"></image>
						<p>开发票</p>
					</view>
		    </view>
		    <view class="content" v-if="navIndex==2">
		     <view class="three flex">
		     	<p @click="changes(10)" :class="{high:math == 10}">全部</p>
		     	<p @click="changes(100)" :class="{high:math == 100}">已支付</p>
		     	<p @click="changes(200)" :class="{high:math == 200}">退款</p>
		     </view>
		    
		     <view class="image">
		     	<image src="../../static/orders.jpg" style="width: 30%;height: 200rpx;margin-top: 180rpx;margin-left: 240rpx;margin-bottom: 20rpx;"></image>
		     	<p>暂无订单</p>
		     	<p>赶快去加油吧</p>
		     </view>
		    </view>
				<view class="content" v-if="navIndex==3">
				  <view class="three flex">
				  	<p @click="changes(10)" :class="{high:math == 10}">全部</p>
				  	<p @click="changes(100)" :class="{high:math == 100}">已支付</p>
				  	<p @click="changes(200)" :class="{high:math == 200}">退款</p>
				  </view>
				  		    
				  <view class="image">
				  	<image src="../../static/orders.jpg" style="width: 30%;height: 200rpx;margin-top: 180rpx;margin-left: 240rpx;margin-bottom: 20rpx;"></image>
				  	<p>暂无订单</p>
				  	<p>赶快去加油吧</p>
				  </view>
				</view>
				<view class="content" v-if="navIndex==4">
				  <view class="three flex">
				  	<p @click="changes(10)" :class="{high:math == 10}">全部</p>
				  	<p @click="changes(100)" :class="{high:math == 100}">已支付</p>
				  	<p @click="changes(200)" :class="{high:math == 200}">退款</p>
				  </view>
				  		    
				  <view class="image">
				  	<image src="../../static/orders.jpg" style="width: 30%;height: 200rpx;margin-top: 180rpx;margin-left: 240rpx;margin-bottom: 20rpx;"></image>
				  	<p>暂无订单</p>
				  	<p>赶快去加油吧</p>
				  </view>
				</view>
				<view class="content" v-if="navIndex==5">
				  <view class="three flex">
				  	<p @click="changes(10)" :class="{high:math == 10}">全部</p>
				  	<p @click="changes(100)" :class="{high:math == 100}">已支付</p>
				  	<p @click="changes(200)" :class="{high:math == 200}">退款</p>
				  </view>
				  		    
				  <view class="image">
				  	<image src="../../static/orders.jpg" style="width: 30%;height: 200rpx;margin-top: 180rpx;margin-left: 240rpx;margin-bottom: 20rpx;"></image>
				  	<p>暂无订单</p>
				  	<p>赶快去加油吧</p>
				  </view>
				</view>
		
		
	</view>
</template>

<script>
	 export default{
	    data(){
	      return{
	        navIndex:1,
	        math:10,
					
	        navList:["选项卡一","选项卡二"],
	        listIndex:0
	      }
	    },
			onLoad(){
				uni.showLoading({
				    title: '加载中'
				}),
				setTimeout(function () {
						  uni.hideLoading();
						}, 500)
			},
	    methods:{
	      checkIndex(index){
	        this.navIndex =index;
	      },
	      change() {
	      	uni.navigateTo({
	      		url: "/pages/order/invoice"
	      	})
	      },
				changes(math) {
								console.log(math)
								this.math = math
							},
							
	      checkListIndex(index){
	        this.listIndex=index;
	      }
	    }
			
	  }

</script>

<style>
@import url("order.css")
</style>
